<template>
	<div class="content">
		<mt-header fixed title="课堂详情">
    	<mt-button icon="back" slot="left" @click="back"></mt-button>	
			<mt-button slot="right">{{ index }}/{{ questionDataList.length }}题</mt-button>
		</mt-header>
		<div>
			<mt-swipe @change="handleChange" :auto="0" :showIndicators="false" :continuous="false"  class="contentBox">
				<mt-swipe-item v-for="item in questionDataList" :key="item">
					<div class="title"><div><span>科目:</span>{{ item.coursename }}</div> <div><span>老师:</span>{{ item.teachername }}</div> <div><span>作答方式:</span>{{ item.answertype }}</div> </div>
					<div class="quesBody" v-html="item.body" v-if="!item.fromppt"></div>
					<div v-if="item.fromppt" class="fromPPT">
						<img :src="IMG_ROOT+item.imgurl" />
					</div>
					<div class="answer">
						<div>
							<div class="left"><span>{{ transAnswer(item.rightanswer) }}</span>正确答案</div>
							<div class="right"><span :class="transAnswer(item.useranswer)==transAnswer(item.rightanswer)?'right':'wrong'">{{ transAnswer(item.useranswer) }}</span>我的答案</div>
						</div>
						<div>
							<div class="left">
								<span>{{ item.class_correct }}</span>班级正确率
							</div>
							<div class="right">
								<span>{{ item.class_particate }}</span> 班级参与率
							</div>
						</div>
					</div>
					<h4 v-show="!item.fromppt">解析：</h4>
					<div v-html="item.analysis"></div>
				</mt-swipe-item>
			</mt-swipe>
		</div>
	</div>
</template>

<script>
	import api from '../../api'
	import { mapState, mapMutations } from 'vuex'
	import { IMG_ROOT } from '../../util/config'
	import $ from 'jquery'

	export default {
		data() {
			return {
				questionDataList: [],
				ids: [],
				index: 1
			}
		},
		created(){			
			this.INIT_STATE();
		},
		activated() {
			var that = this;
			this.IMG_ROOT=IMG_ROOT
			api.getStudentLessonrecordsOfXiti({
				studentid: this.userlogin.uid,
				classid: this.userlogin.classid,
				day: this.$route.params.day
			}).then(response => {
				var arr = response.data.data
				this.questionDataList = arr[0];
				var imgArr = arr[1];
				this.ids = this.questionDataList.map(function(x) {
					return x.id
				})
				
				api.getListQuestionById(this.ids.join(',')).then(response => {
					var _arr = response.data.datalist
					that.questionDataList.forEach(function(v, i) {
						var item=_arr.find(function(x){return x.id==v.id})
						that.$set(v, 'body', item.body);
						that.$set(v, 'analysis', item.analysis);
						that.$set(v, 'rightanswer', item.answer);
					})
					console.log(that.questionDataList)
					that.questionDataList = that.questionDataList.concat(imgArr)
					setTimeout(function(){
						
					$('.quesBody>span').css('font-weight','bold')
					},1000)
				})
			})
		},
		computed: {
			...mapState(['userlogin'])
		},
		methods: {
			...mapMutations(['INIT_STATE']),
			handleChange(index) {
				this.index = index + 1;
			},
			transAnswer(ans){
				if(ans.indexOf('正确')>-1||ans=='R'||ans.indexOf('对')>-1){
					return '√';	
				}else if(ans.indexOf('错误')>-1||ans=='W'||ans.indexOf('错')>-1){
					return 'X';					
				}else{
					return ans
				}
			},
		back(){
			window.history.back()
		}
		}
	}
</script>

<style scoped>
	.content{
		padding-bottom: 0;
	}
	.contentBox {
		font-size: 14px;
		height: 600px;
		overflow: scroll;
		text-align: left;
		padding-left: 18px;
		padding-right: 18px;
	}
	
	.contentBox .title {
		font-size: 14px;
		color: #3c3c3c;
		padding-bottom: 14px;
		margin-top: 14px;
		border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
		margin-bottom: 14px;
		text-align: center;
		display: flex;
		justify-content: space-between;
	}
	.contentBox .title span{
		font-weight: bold;
	}
	.contentBox h4 {
		font-weight: bold;
		font-size: 16px;
		color: cornflowerblue;
		margin-top: 21px;
		margin-bottom: 10px;
		font-size: 14px;
		color: #FA8C13;
		letter-spacing: -0.3px
	}
	.quesBody>span{
		font-weight: bold!important;
	}
	.contentBox .answer {
		height: 117px;
		line-height: 30px;
		border: 1px dashed rgba(0, 0, 0, 0.2);
		margin-top: 26px;
	}
	
	.contentBox .answer>div {
		color: #9b9b9b;
		font-size: 12px;
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}
	
	.contentBox .answer>div {}
	
	.contentBox .answer>div:nth-of-type(1)>.left>span {
		font-size: 20px;
		color: #3c3c3c;
	}
	
	.contentBox .answer>div:nth-of-type(1)>.right>span.right {
		font-size: 20px;
		color: #6AE57E;
	}
	
	.contentBox .answer>div:nth-of-type(1)>.right>span.wrong {
		font-size: 20px;
		color: #F65D5D;
	}
	
	.contentBox .answer>div:nth-of-type(2) span {
		font-size: 20px;
		color: #3c3c3c;
	}
	
	.contentBox .answer span {
		color: white;
		margin-right: 12px;
	}
	.fromPPT{
		height: 180px;
	}
	.fromPPT>img{
		width: 100%;
		height: 100%;
	}
</style>